<template>
  <router-link to="/search">
    <div class="van-search">
      <VSearch />
    </div>
  </router-link>
  <div style="height: 50px"></div>

  <div class="cate">
    <div class="cate_left">
      <van-sidebar v-model="active">
        <van-sidebar-item v-for="item in cateList" @click="slideClick(item.id)" :key="item.id" :title="item.name" />
      </van-sidebar>
    </div>
    <div class="cate_right">
      <Catenav :category2="category2" :bannerImg="bannerImg" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { CategoryGroupList, CategoryL1List, CurrentCategory } from '@/types/cateList'
import { onMounted, ref } from 'vue'
import { reqCateList, reqGoodsList } from '../../api/cate'

const active = ref(0)

// 一级分类列表数据
const cateList = ref<CategoryL1List[]>([])

// 二级分类列表数据
const category2 = ref<CategoryGroupList[]>([])

// 二级分类头部轮播图
const bannerImg = ref<CurrentCategory>()

// 一级id
var prantId = ref(0)

// 切换侧边导航栏
const slideClick = (id: number) => {
  prantId.value = id
  getGoodsData()
}

// 获取一级菜单
const getCateList = async () => {
  const res = await reqCateList()
  cateList.value = res.data.categoryL1List
}

// 根据一级id获取二级数据
const getGoodsData = async () => {
  const res = await reqGoodsList(prantId.value)
  // console.log('二级分类', res)
  category2.value = res.data.categoryGroupList
  bannerImg.value = res.data.currentCategory
}

onMounted(() => {
  getCateList()
  getGoodsData()
})
</script>

<script lang="ts">
export default {
  name: 'VCate'
}
</script>

<style lang="scss" scoped>
.cate {
  display: flex;
  justify-content: space-between;
  .cate_right {
    padding: 0 15px;
  }
}
.van-search {
  // background-color: palegoldenrod;
  // width: 100%;
  width: 361px;
  position: fixed;
  top: 0;
  z-index: 999;
  margin-bottom: 50px;
}

.VSearch {
  position: fixed;
  top: 0;
}
</style>
